[V0_FILE]typescriptreact:file="tailwind.config.ts" isEdit="true" isMerged="true" import type { Config } from "tailwindcss" const { fontFamily } = require("tailwindcss/defaultTheme") const config = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], prefix: "", theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, fontFamily: { sans: ["var(--font-sans)", ...fontFamily.sans], mono: ["var(--font-mono)", ...fontFamily.mono], }, }, }, plugins: [require("tailwindcss-animate")], } satisfies Config export default config [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { /* Base colors */ --background: 0 0% 100%; --foreground: 0 0% 0%; /* Primary: Bauhaus Red */ --primary: 0 90% 50%; --primary-foreground: 0 0% 100%; /* Secondary: Bauhaus Blue */ --secondary: 220 90% 53%; --secondary-foreground: 0 0% 100%; /* Accent: Bauhaus Yellow */ --accent: 48 96% 53%; --accent-foreground: 0 0% 0%; } .dark { /* Dark mode colors */ --background: 0 0% 0%; --foreground: 0 0% 100%; } } @layer base { * { @apply border-black; } body { @apply bg-background text-foreground font-mono; } /* Bauhaus-inspired typography */ h1, h2, h3, h4, h5, h6 { @apply font-sans font-black tracking-tighter; } } @layer components { .shadow-brutal { box-shadow: 0.5rem 0.5rem 0 0 black; } .shadow-brutal-inverse { box-shadow: 0.5rem 0.5rem 0 0 white; } .shadow-brutal-white { box-shadow: 0.5rem 0.5rem 0 0 white; } } [V0_FILE]typescriptreact:file="design-system.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { Plus, Minus, Circle, Square, Triangle } from "lucide-react" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Checkbox } from "@/components/ui/checkbox" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" export default function BauhausBrutalism() { const [darkMode, setDarkMode] = useState(false) return (

{/* Navigation */}

BAUHAUS.BRUTAL

) } function BauhaustTabs() { return (

OVERVIEW TYPOGRAPHY COLORS COMPONENTS

{/* Overview Tab */}

Bauhaus-Brutalism Design System

A design system that blends Bauhaus principles with colorful brutalism.

BAUHAUS PRINCIPLES

Geometric shapes and clean lines
Primary colors with black and white
Functional and minimal design
Grid-based layouts
Sans-serif typography

BRUTALIST ELEMENTS

Bold, vibrant color accents
Raw, unpolished textures
Asymmetrical compositions
Exposed structural elements
Intentional design "breaks"

DESIGN PRINCIPLES

FUNCTIONAL CLARITY

Every element serves a clear purpose with no unnecessary decoration.

BOLD SIMPLICITY

Simple forms expressed boldly with intentional contrast and tension.

GEOMETRIC EXPRESSION

Geometric shapes as the foundation with brutalist expressions.

{/* Typography Tab */}

TYPOGRAPHY

Our typography system combines Bauhaus clarity with brutalist boldness.

TYPE SPECIMENS

Heading 1

Geometric Bold

Heading 2

Functional Clear

Heading 3

Brutalist Expression

Heading 4

Structured Content

Body Text

Body text uses a clean, monospaced font for that raw brutalist feel while maintaining Bauhaus legibility. The quick brown fox jumps over the lazy dog.

Small Text / Caption

Small text for captions and supporting information. The quick brown fox jumps over the lazy dog.

BAUHAUS TYPOGRAPHY

Sans-serif Clean and geometric
Functional Highly legible
Structured Clear hierarchy

BRUTALIST TYPOGRAPHY

Monospaced Raw and mechanical
Expressive Bold contrasts
Disruptive Breaking conventions

{/* Colors Tab */}

COLOR PALETTE

Our color system combines Bauhaus primary colors with brutalist vibrant accents.

{/* Bauhaus Primary Colors */}

BAUHAUS PRIMARY COLORS

RED

#DC2626

BLUE

#2563EB

YELLOW

#EAB308

{/* Brutalist Accent Colors */}

BRUTALIST ACCENT COLORS

CYAN

#22D3EE

FUCHSIA

#D946EF

LIME

#A3E635

ORANGE

#F97316

EMERALD

#10B981

{/* Neutral Colors */}

NEUTRAL COLORS

WHITE

#FFFFFF

BLACK

#000000

{/* Components Tab */}

COMPONENTS

Our components blend Bauhaus functionality with brutalist expression.

{/* Buttons */}

BUTTONS

PRIMARY BUTTONS

BRUTALIST BUTTONS

{/* Form Elements */}

FORM ELEMENTS

TEXT INPUTS

PASSWORD

SELECTION CONTROLS

CHECKBOXES

Accept terms and conditions

RADIO GROUP

Option One

Option Two

{/* Cards & Containers */}

CARDS & CONTAINERS

BAUHAUS CARD

Clean geometric design with strong borders and functional layout.

PRIMARY CARD

Bold blue background with high contrast white text for emphasis.

BRUTALIST CARD

Raw black background with contrasting white text for visual impact.

GRADIENT CONTAINER

Vibrant gradient background with brutalist color combinations.

Content inside a nested container

DASHED CONTAINER

Exposed structure with dashed border treatment.

Grid Item 1

Grid Item 2

{/* Modal */}

MODAL DIALOG

MODAL TITLE

This is a modal dialog with a consistent header style and strong borders.

) }

About

Tags

Share

About

Tags

Share

More from achen2089

More Templates Like This

About

Tags

Share

About

Tags

Share

More from achen2089

More Templates Like This